﻿@model USERS.CYT369.COM.Models.AccountView.ResetPasswordViewModel
@{
    ViewBag.Title = "重置密码";
    ViewBag.HeaderName = "重置密码";
    Layout = "~/Views/Shared/_ResetPasswordLayout.cshtml";
    var phoneNumber = ViewBag.PhoneNumber as string;
    if (!string.IsNullOrEmpty(phoneNumber))
    {
        phoneNumber = $"{phoneNumber.Substring(0, 3)}******{phoneNumber.Substring(phoneNumber.Length - 4, 3)}";
    }

    string errorStyle = string.Empty;
    string successStyle = string.Empty;
    if (!string.IsNullOrEmpty(ViewBag.ErrorMsg as string))
    {
        errorStyle = "style='display:block'";
        successStyle = "style='display:none'";
    }
}

@section styles{
    <link href="~/Content/ForgotPassword.css" rel="stylesheet" />
}

@section scripts{
    <script type="text/javascript">
        function GetCaptcha(btn) {
            if ($(btn).attr("disable") != "true") {
                $.post('@Url.Content("~/Account/ResetPasswordGetCaptcha")?t=' + new Date().getTime(), function (e) {
                    if (e.Result) {
                        $(".success-panel").find("span").text(e.Msg);
                        $(".success-panel").show();
                        $(".error-panel").hide();

                        $("#CaptchaCode").attr("hascode", 1);
                        $(btn).attr("disable", true);
                        $(btn).attr("second", 60);
                        $(btn).text("重新获取(60)");
                        $(btn).addClass("captcha-btn-disable");
                        setTimeout("SecondChange()", 1000);
                    } else {
                        $(".error-panel").find("span").text(e.Msg);
                        $(".error-panel").show();
                        $(".success-panel").hide();
                    }
                });
            }
        }

        function SecondChange() {
            var btn = $("#captcha-btn");
            var second = parseInt(btn.attr("second"));
            if (second > 0) {
                second -= 1;
                btn.attr("second", second);
                btn.text("重新获取(" + second + ")");
                if (second > 0) {
                    setTimeout("SecondChange()", 1000);
                } else {
                    $(btn).attr("disable", false);
                    $(btn).removeClass("captcha-btn-disable");
                    btn.text("获取动态码");
                }
            }
        }

        function FormSubmit() {
            if ($("#CaptchaCode").val() == "") {
                $(".success-panel").hide();
                $(".error-panel").find("span").text("请输入验证码");
                $(".error-panel").show();
                return false;
            }
            if ($("#Password").val() == "") {
                $(".success-panel").hide();
                $(".error-panel").find("span").text("请输入新密码");
                $(".error-panel").show();
                return false;
            }
            if ($("#Password").val().length < 6) {
                $(".success-panel").hide();
                $(".error-panel").find("span").text("密码长度要求至少6位");
                $(".error-panel").show();
                return false;
            }
            return true;
        }

        $(document).ready(function () {
            var btn = $("#captcha-btn");
            $(btn).attr("disable", true);
            $(btn).attr("second", 60);
            $(btn).text("重新获取(60)");
            $(btn).addClass("captcha-btn-disable");
            setTimeout("SecondChange()", 1000);
        });
    </script>
}

<form method="post" action="~/Account/ResetPassword" onsubmit="return FormSubmit()">
    <div class="step-table">
        <div class="menus">
            <div class="menu"><a href="~/Account/ForgotPassword">找回登录密码</a></div>
        </div>
        <div class="step-grid">
            <div class="step-menu-panel">
                <div class="menu menu-name panel-name">找回登录密码</div>
                <div class="menu menu-step passed">
                    <div class="progress"></div>
                    <div class="text">第一步：填写账号</div>
                </div>
                <div class="menu menu-step active">
                    <div class="progress"></div>
                    <div class="text">第二步：验证并设置新密码</div>
                </div>
                <div class="menu menu-step inactive">
                    <div class="progress"></div>
                    <div class="text">第三步：设置成功</div>
                </div>
            </div>
            <div class="enter-captcha-code-panel">
                <div class="success-panel" @Html.Raw(successStyle)><i class="fa fa-check-circle-o" style="margin-right:10px"></i><span>验证码已发送至您的绑定手机<i>@phoneNumber</i>，请注意查收！</span></div>
                <div class="error-panel" @Html.Raw(errorStyle)><i class="fa fa-info-circle" style="margin-right:10px"></i><span>@ViewBag.ErrorMsg</span></div>
                <div class="ctrl-row">
                    <div class="prompt">验证码：</div>
                    <input type="text" name="CaptchaCode" id="CaptchaCode" class="text-box" maxlength="6" placeholder="请输入验证码" autocomplete="off" />
                    <div class="after-prompt">
                        <div id="captcha-btn" class="captcha-btn" second="60" disable="true" onclick="GetCaptcha(this)">重新获取</div>
                    </div>
                </div>
                <div class="ctrl-row">
                    <div class="prompt">设置新密码：</div>
                    <input type="password" name="Password" id="Password" class="text-box" maxlength="14" placeholder="请输入新密码" autocomplete="off" />
                    <div class="after-prompt">密码长度要求大于(或等于)6位，密码要求包含数字、字母和特殊符号。</div>
                </div>
                <div>
                    <input class="btn" type="submit" style="margin-left:120px" value="下一步" />
                </div>
            </div>
            <div class="question-panel">
                <div class="panel-name" style="font-size:13px;">使用遇到的问题？</div>
                <div>无法找回餐饮通账户登录密码，怎么办？</div>
                <div style="display:flex;">
                    <div>答：</div>
                    <ul>
                        <li>1、找回登录密码只能通过绑定手机找回，请确认您绑定了手机。</li>
                        <li>2、如果长时间未接收到手机短信，请查看您的拦截短信。</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


</form>
